<template>
  <div class="p20">
    <template v-show="!showHistory">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-select
            placeholder="$t('sys.status')"
            v-model="queryData.valid"
            style="width: 100%"
            @change="loadData"
          >
            <el-option :label="$t('sys.be_valid')" :value="1"></el-option>
            <el-option :label="$t('sys.be_invalid')" :value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="18">
          <div style="float: right">
            <el-button type="primary" @click="startAuthProcess">{{
              $t("sys.initiating_entrustment")
            }}</el-button>
            <el-button type="primary" plain @click="showHistory = true">
              {{ $t("sys.entrustment_history") }}</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-table
        row-key="id"
        v-show="!showHistory"
        v-loading="loading"
        :data="tableData"
        ref="table"
        style="width: 100%"
        class="mt20 auth-table"
      >
        <el-table-column
          prop="userName"
          :label="$t('sys.client')"
        ></el-table-column>
        <el-table-column prop="createTime" :label="$t('sys.entrusted_time')">
          <template slot-scope="scope">
            {{ new Date(scope.row.startAt).format("yyyy-MM-dd hh:mm") }}
            {{ $t("sys.to") }}
            {{ new Date(scope.row.endAt).format("yyyy-MM-dd hh:mm") }}
          </template>
        </el-table-column>
        <el-table-column
          class="auth-table__process"
          prop="processName"
          :label="$t('sys.delegation_process')"
        >
          <template slot-scope="scope">
            <el-tag
              class="mr5"
              v-for="(item, index) in scope.row.processNames"
              :key="index"
              type="info"
              ><span :title="item" class="limit">{{ item }}</span></el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="actions"
          :label="$t('sys.operation')"
          width="120px"
        >
          <template slot-scope="scope">
            <template>
              <span class="table-actionItem"
                ><el-button type="text" @click="handleEdit(scope.row)">{{
                  $t("sys.edit")
                }}</el-button></span
              >
              <span class="table-actionItem">
                <el-popconfirm
                  :title="$t('sys.confirm_to_delete_delegate')"
                  placement="top"
                  @confirm="handleDelete(scope.row)"
                >
                  <el-button class="link-danger" type="text" slot="reference">{{
                    $t("sys.delete")
                  }}</el-button>
                </el-popconfirm>
              </span>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!showHistory" class="tr mt24">
        <x-pagination
          :total="total"
          :pageSize.sync="pageData.pageSize"
          :pageNo.sync="pageData.pageNo"
          @search="loadData"
        />
      </div>
    </template>
    <template v-show="showHistory">
      <div v-show="showHistory" style="height: 20px">
        <el-button
          style="float: right"
          type="primary"
          @click="showHistory = false"
          >{{ $t("sys.return") }}</el-button
        >
      </div>
      <el-table
        ref="tableHistory"
        row-key="id"
        v-show="showHistory"
        v-loading="historyLoading"
        :data="historyData"
        style="width: 100%"
        class="mt20"
      >
        <el-table-column prop="processName" :label="$t('sys.process_type')">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="todoForm(scope.row)"
              :title="scope.row.processName"
              class="process__limit"
            >
              {{ scope.row.processName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="taskName"
          :label="$t('sys.task_theme')"
        ></el-table-column>
        <el-table-column
          prop="submitterName"
          :label="$t('sys.principal_agent')"
        ></el-table-column>
        <el-table-column
          prop="submitterOrgName"
          :label="$t('sys.principal_department')"
        ></el-table-column>
        <el-table-column prop="createTime" :label="$t('sys.arrival_time')">
          <template slot-scope="scope">
            {{ new Date(scope.row.createTime).format("yyyy-MM-dd hh:mm") }}
          </template>
        </el-table-column>
      </el-table>
      <div class="tr mt24">
        <x-pagination
          :total="historyTotal"
          :pageSize.sync="historyPageData.pageSize"
          :pageNo.sync="historyPageData.pageNo"
          @search="loadHistoryData"
        />
      </div>
    </template>

    <auth-modal ref="authModel" @reset="loadData"></auth-modal>
  </div>
</template>

<script>
import {
  deleteHmtaskdelegate,
  getHmtaskdelegatePageList,
} from "@/apis/paas/HmTaskDelegateController.js";
import { getHmprocesshistoryTaskDelegate } from "@/apis/paas/HmProcessHistoryController.js";
import { getHmprocessruntimeHistorictaskformkey } from "@/apis/paas/HmProcessRuntimeController.js";
import authModal from "./authModal";
export default {
  components: {
    authModal,
  },
  data() {
    return {
      showHistory: false,
      total: 0,
      loading: false,
      queryData: { valid: 1 },
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      // 历史
      historyLoading: false,
      historyData: [],
      historyPageData: {
        pageSize: 10,
        pageNo: 1,
      },
      historyTotal: 0,
    };
  },
  mounted() {
    this.loadData();
  },
  watch: {
    showHistory: function (val) {
      if (val) {
        this.tableData = [];
        this.loadHistoryData(1);
      } else {
        this.historyData = [];
        this.loadData(1);
      }
    },
  },

  methods: {
    async todoForm({ taskId }) {
      let { dataId, view: pageKey } =
        await getHmprocessruntimeHistorictaskformkey({
          taskId,
        });
      this.$router.push({
        name: "app-audit-audit",
        query: { taskId, pageKey, id: dataId },
      });
    },
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true;
      getHmtaskdelegatePageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
      })
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1);
            return;
          }
          this.tableData = res.data;
          this.total = res.totalCount;
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    startAuthProcess() {
      const dialog = this.$refs.authModel;
      dialog.addForm();
    },
    viewAuthHistory() {},
    handleEdit(record) {
      const dialog = this.$refs.authModel;
      dialog.editForm(record);
    },

    handleDelete(record) {
      deleteHmtaskdelegate([record.id]).then((res) => {
        this.loadData();
        this.$message.success(this.$t("sys.operation_success"));
      });
    },
    // 历史数据
    loadHistoryData(pageNo = this.historyPageData.pageNo) {
      this.historyLoading = true;
      getHmprocesshistoryTaskDelegate({
        ...this.historyPageData,
        pageNo,
      })
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadHistoryData(pageNo - 1);
            return;
          }
          this.historyData = res.data;
          this.historyTotal = res.totalCount;
          this.historyPageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          };
        })
        .finally(() => {
          this.historyLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.auth-table {
  ::v-deep .el-table__row .cell {
    display: block;
    width: 100%;
  }
}
.el-tag {
  max-width: 90%;
}
.limit {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
.process__limit {
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
</style>
